<template>
  <div class="home">
    <Header />

    <ly-tabs
      v-model="value"
      :activeColor="activeColor"
      :change="tabsHandel(value)"
    >
      <ly-tab-item
        :name="index"
        :title="title.label"
        v-for="(title, index) in items"
        :key="index"
      />
    </ly-tabs>

    <section>
      <Swiper />
      <Icons />
      <Recommend />
      <Like />
    </section>
      <!-- p11 -->
    <Tabbar />
  </div>
</template>

<script>
import Header from "@/components/home/header.vue";
import Swiper from "@/components/home/Swiper";
import Icons from "@/components/home/Icons";
import Recommend from '@/components/home/Recommend'
import Like from '@/components/home/Like.vue'
import { LyTabs, LyTabItem } from "ly-tab";
import axios from 'axios'
export default {
  name: "Home",
  components: { Header, LyTabs, LyTabItem, Swiper, Icons, Recommend, Like},
  data() {
    return {
      value: 0,
      items: [
        { label: "推荐" },
        { label: "大红袍" },
        { label: "铁观音" },
        { label: "普洱" },
        { label: "红茶" },
        { label: "绿茶" },
        { label: "白茶" },
        { label: "黑茶" },
        { label: "果茶" },
        { label: "金骏眉" },
        { label: "茉莉花茶" },
      ],
      activeColor: "#b0352f",
    };
  },
  methods: {
    tabsHandel(index) {
      console.log(index);
    },
  },
  created() {
    axios({
      url: '/api/home'
      // 16 .5
    }).then(res => {
      console.log(res);
    })
  },
};
</script>

<style lang="less" scoped>
.ly-tabs {
  z-index: 999;
  padding: 0.1333rem 0;
  position: fixed;
  top: 1.1rem;
  left: 0;
  border-bottom: none;
  background-color: #fff;
}
.ly-tabs .ly-tab-item {
  font-size: 0.3733rem;
}
section {

 &::after {
        content: "";
        display: block;
        width: 100%;
        height: 2rem;
      }
}
</style>